import {h, HtmlNode, HtmlNodeModel} from "@logicflow/core";
import htm from "htm";
import anime from 'animejs/lib/anime.es.js';

class SquareLakeSwichCase extends HtmlNode {

    shouldUpdate() {

        if (this.init) {
            return false;
        }
        this.init = true;
        return true;
    }

    setHtml(rootEl) {
        const {properties, id} = this.props.model;

        let icon = properties.icon;
        if (icon) {
            icon = window.atob(icon);
        } else {
            icon = `<svg t="1669533061458" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3478" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.78125" height="200"><path d="M632.398351 656.400958c18.899951-4.499988 25.699933-27.699928 9.799975-42.399889l-47.499877-43.999885C642.498325 518.501318 794.797928 306.401871 553.998555 2.302664c-3.99999-3.69999-11.59997-3.399991-11.29997 4.299989 69.799818 226.599409-29.299924 333.49913-106.399723 416.698913l-43.599886-40.399894c-11.899969-10.999971-34.49991-2.499993-37.599902 16.699956l-17.199955 248.999351c-2.799993 26.89993 20.999945 48.899872 47.499876 43.999885l246.999356-36.199906z" p-id="3479"></path><path d="M1027.99732 250.702016c0-84.899779-68.89982-153.799599-153.799599-153.799599-23.799938 0-46.299879 5.399986-66.399827 15.099961-29.599923-26.399931-62.699837-48.799873-98.599743-66.599826v79.899791c18.299952 11.299971 35.699907 24.299937 51.999864 38.899899l34.799909 31.099919 42.099891-20.199948c11.299971-5.399986 23.499939-8.199979 36.199905-8.199978 46.19988 0 83.799781 37.599902 83.799782 83.799781 0 14.899961-3.89999 29.499923-11.39997 42.29989-7.299981 12.399968-17.699954 22.89994-30.199922 30.199921l-40.099895 23.499939 5.999984 46.09988c2.099995 16.099958 3.199992 32.499915 3.199992 48.799873 0 77.199799-23.499939 151.299605-67.899823 214.099441-21.399944 30.299921-47.199877 57.199851-76.499801 79.899792a371.649031 371.649031 0 0 1-97.299746 54.199859l-45.099882 16.799956-0.399999 48.099874c-0.199999 22.199942-8.999977 43.099888-24.799936 58.699847-15.799959 15.699959-36.699904 24.299937-58.999846 24.299937-22.199942 0-43.099888-8.599978-58.899846-24.199937-15.899959-15.699959-24.699936-36.499905-24.899935-58.699847l-0.599999-48.099874-45.099882-16.699957c-34.999909-12.999966-67.899823-31.199919-97.599746-54.099859-29.499923-22.699941-55.299856-49.599871-76.799799-79.999791-44.599884-62.899836-68.099822-137.099643-68.099823-214.499441 0-16.299957 1.099997-32.699915 3.199992-48.799873l5.999984-46.099879-40.099895-23.499939a84.059781 84.059781 0 0 1-30.199922-30.199921C73.899807 280.201939 69.999817 265.601977 69.999817 250.702016c0-46.19988 37.599902-83.799781 83.799782-83.799781 12.699967 0 24.899935 2.699993 36.199906 8.199978l42.09989 20.199948 34.799909-31.099919c14.999961-13.399965 30.999919-25.499934 47.899875-36.199906V47.402546c-34.299911 17.399955-66.099828 39.099898-94.599753 64.499832-20.099948-9.599975-42.599889-15.099961-66.399827-15.09996C68.89982 96.902417 0 165.702238 0 250.702016c0 56.699852 30.69992 106.199723 76.299801 132.899654-2.499993 18.99995-3.79999 38.2999-3.79999 57.899849 0 189.899505 119.999687 351.899082 288.199249 414.19892 0.999997 84.099781 69.499819 151.899604 153.799598 151.899604 84.49978 0 152.999601-68.099822 153.799599-152.299603C835.99782 792.700603 955.497509 631.001025 955.497509 441.501519c0-19.599949-1.299997-38.999898-3.79999-57.899849 45.599881-26.69993 76.299801-76.199801 76.299801-132.899654zM709.198151 125.302343V45.402552" p-id="3480"></path></svg>`;
        }

        const c = properties.classNameList || [];

        let classNames = "";
        for (let b of c) {
            classNames += " " + b;
        }


        const el = document.createElement("div");
        el.className = "uml-wrapper";
        el.style = "width:100%;height:100%;";
        var s = window.btoa(icon);
        const html = `
      <div class="nodeBoxSwitchCase ${id} ${classNames} squareLakeSwichCase">
            <path fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path>
            <image style="width: 30px;height: 30px; margin: 55% auto;position: relative;left: 0px;" src="data:image/svg+xml;base64,${s}"/>
                <div></div>
      </div>
    `;

        el.innerHTML = html;
        // 需要先把之前渲染的子节点清除掉。
        rootEl.innerHTML = "";
        rootEl.appendChild(el);
    }
}

class SquareLakeNormalSwichCaseModel extends HtmlNodeModel {
    initNodeData(data) {
        if (data.text && typeof data.text === "string") {
            data.text = {
                value: data.text, x: data.x + 15, y: data.y
            };
        }
        super.initNodeData(data);
    }

    setAttributes() {
        this.text.editable = false; // 禁止节点文本编辑
        // 设置节点宽高和锚点
        const width = 100;
        const height = 100;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [[width / 2, 0], [0, height / 2], [-width / 2, 0], [0, -height / 2],];
    }
}

export default {
    type: "SwitchCase", model: SquareLakeNormalSwichCaseModel, view: SquareLakeSwichCase
};
